<template>
	<div class="detail-product-images" @mousemove="stopSlide" @mouseout="startSlide">
		<!--大图-->
		<div class="detail-big-image">
			<img v-lazy="slideImages[nowIndex]" imgtype='goods'/>
		</div>
		<!--小图-->
		<div class="detail-slider">
			<div class="detail-slider-images">
				<ul id="detail-slider-list" :style="{ width: slideImages.length * (divWidth + 15) - 15 + 'px', transitionDuration: duration + 's', transform: 'translateX(-' + position + 'px)' }">
					<li v-for="(item, index) in slideImages">
						<div class="detail-slider-small-images" :class="{ 'active': index === nowIndex }" @click="selectImage(index)">
							<img v-lazy="item" imgtype='smallgoods'/>
						</div>
					</li>
				</ul>
			</div>
			<div class="detail-slider-arrow">
				<div class="detail-slider-prev" @click="selectImage(prevIndex)"></div>
				<div class="detail-slider-next" @click="selectImage(nextIndex)"></div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: 'DetailSlider',
  props: {
    slideImages: {
      type: [Array, Object],
      required: true
    }
  },
  data () {
    return {
      nowIndex: 0,
      divWidth: 60,
      duration: 0.5,
      position: 0
    }
  },
  computed: {
    prevIndex () {
      if (this.nowIndex === 0) {
        return 0
      } else {
        return this.nowIndex - 1
      }
    },
    nextIndex () {
      let arr = Object.keys(this.slideImages)
      let len = arr.length
      if (this.nowIndex === len - 1) {
        return this.nowIndex
      } else {
        return this.nowIndex + 1
      }
    }
  },
  methods: {
    selectImage (index) {
      let len = this.slideImages.length
      if (index > len - 1) {
        index = 0
      }
      this.nowIndex = index
      let nowIndex = this.nowIndex
      if (nowIndex <= 2) {
        this.position = 0
      } else if (nowIndex > 2 && nowIndex < len - 2) {
        this.position = (nowIndex - 2) * (this.divWidth + 15)
      }
    },
    stopSlide () {
      clearInterval(this.slide)
    },
    startSlide () {
      this.slide = setInterval(() => {
        this.selectImage(this.nowIndex + 1)
      }, 2000)
    }
  },
  mounted () {
    this.startSlide()
  }
}
</script>

<style scoped>
.detail-product-images {
	width: 420px;
}
.detail-big-image{
	width: 420px;
	height: 420px;
	border: 1px solid #e6e6e6;
	box-sizing: border-box;
	margin-bottom: 16px;
}
.detail-big-image img{
	width: 100%;
	height: 100%;
}

.detail-slider {
	width: 420px;
	height: 60px;
	position: relative;
}

.detail-slider-images {
	width: 360px;
	height: 60px;
	margin: 0 auto;
	overflow: hidden;
}

.detail-slider-images ul:after {
	content: '';
	display: block;
	height: 0;
	width: 0;
	clear: both;
	visibility: hidden;
}

.detail-slider-images li {
	float: left;
	cursor: pointer;
	margin-right: 15px;
}

.detail-slider-images li:last-child {
  margin-right: 0;
}

.detail-slider-small-images {
	width: 58px;
	height: 58px;
	border: 1px solid #e6e6e6;
}

.detail-slider-small-images:hover {
	border: 1px solid #ff600a;
}

.detail-slider-small-images img {
	width: 100%;
	height: 100%;
}

.active {
	border: 1px solid #ff600a;
}

.detail-slider-arrow {
}

.detail-slider-prev, .detail-slider-next {
	width: 14px;
	height: 60px;
	background-size: 14px;
	position: absolute;
	top: 0;
	cursor: pointer;
}

.detail-slider-prev {
	left: 0;
	background: url(../../assets/images/icon_arrow_left.png) no-repeat center center;
}

.detail-slider-next {
	right: 0;
	background: url(../../assets/images/icon_arrow_right.png) no-repeat center center;
}
</style>
